<template>
  <div id="app">
    <header class="head">
      <router-link class="back tl" to='/index'>
        <i class="el-icon-arrow-left"></i>
      </router-link>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">档案信息</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>
    </header>
    <main>
      <div>
        <mt-navbar v-model="selected">
          <mt-tab-item id='tab-container1'>
            <font class="font_1">基本信息</font>
          </mt-tab-item>
          <mt-tab-item id='tab-container2'>
            <font class="font_1">许可证信息</font>
          </mt-tab-item>
          <mt-tab-item id='tab-container3'>
            <font class="font_1">监管信息</font>
          </mt-tab-item>
        </mt-navbar>
        <div class="bor"></div>
        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="selected" swipeable>
            <mt-tab-container-item id="tab-container1">
              <!-- 基本信息 -->
                <div class="formcontent">
                <ul>
                   <li>
                    <span>
                     许可证号</span>
                    <div class="froms">
                      <input v-model="this.datalist.code" disabled>
                    </div>
                  </li>
                  <li>
                      <span>法定代表人/负责人</span>
                      <div class="froms">
                        <input v-model="this.datalist.legalPerson" disabled>
                      </div>
                    </li> 
                     <li>
                      <span>单位名称:</span>
                      <div class="froms">
                          <input v-model="this.datalist.name" disabled>
                      </div>
                    </li>
                     <li>
                      <span>法定代表人/负责人联系方式:</span>
                      <div class="froms">
                          <input v-model="this.datalist.foodSecurityPersonPhone" disabled>
                      </div>
                    </li>
                  <li>
                    <span>地址:</span>
                    <div class="froms">
                      <input v-model="this.datalist.businessAddress" disabled>
                    </div>
                  </li>
                </ul>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container2">
              <!-- 许可证信息 -->
              <div class="formcontent">
              2
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container3">
              <!-- 监管信息 -->
              <div class="formcontent">
               3
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    PermitInfoForEnterpriseUnid
  } from '../../api/api';
  import {
    TabContainer,
    TabContainerItem,
    Navbar,
    TabItem
  } from 'mint-ui';
  export default {
    components: {
      'mt-tab-container': TabContainer,
      'mt-tab-container-item': TabContainerItem,
      'mt-navbar': Navbar,
      'mt-tab-item': TabItem
    },
    data() {
      return {
        selected: 'tab-container1',
        datalist: {}
      };
    },
    methods: {
      getdata: function() {
        let options = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          }
        };
        PermitInfoForEnterpriseUnid(options).then((res) => {
          if (res.success === true) {
            this.datalist = res.data;
          }
        })
      },
    },
    created() {
      this.getdata()
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    display: inline-block;
  }
  
  .nav {
    padding: 10px;
  }
  
  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }
  
  //tab切换样式重构
  .mint-navbar .mint-tab-item.is-selected {
    color: #feaa50 !important;
    border-bottom: 3px solid #feaa50;
  }
  
  .font_1 {
    font-size: 1rem
  }
  
  .bor {
    height: 0.4rem;
    background: #efeef4;
  }
  
  .mint-tab-container-item {
    min-height: 500px
  }
  
  .mint-navbar {
    background: #fff;
    color: #888888
  }
</style>
